<template>
	<movable-area class="movable-area">
		<movable-view class="movable-view" direction="all">
			<button class="newProblem" open-type="im" :data-im-type="imtype" :data-order-id="orderid" :data-im-id="imId" @im="imCallback" @error="onimError">
				<image src="../../static/kefu.png" mode="widthFix" class="kef" />
				<view class="kview">
					<text>客服</text>
					<!-- 	<text>08:00-22:10</text> -->
				</view>
			</button>
		</movable-view>
	</movable-area>
</template>

<script>
	export default {
		name: "contract-service",
		props: {
			goodid: String,
			orderid: String,
			imtype: {
				type:String,
				default:''
			} //goods,order
		},
		data() {
			return {
				imId: "hjm616161",
			}
		},

		mounted() {
			setTimeout(() => {
				const kefuList = getApp().globalData.kefuList;
				this.imId = kefuList[0];
			}, 1500)

		},
		methods: {
			imCallback(e) {
				console.log("跳转IM客服成功", e.detail);
			},
			onimError(e) {
				console.log("拉起IM客服失败", e.detail);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.movable-area {
		// 保持在右下角
		width: 160rpx;
		// height: 100rpx;
		right: -12rpx;
		top: 68%;
		position: fixed;
		z-index: 99999999;
		pointer-events: none; //此处要加，鼠标事件可以渗透

		.movable-view {
			position: relative;
			pointer-events: auto; //恢复鼠标事件

			.newProblem {
				position: relative;
				display: flex;
				justify-content: center;
				flex-direction: row;
				align-items: center;
				background-image: linear-gradient(to right, #effffe, #fff);
				padding: 0 14rpx;
				height: 72rpx;
				//border-radius: 50%;
				border: 1px solid #a9b0da;
				border-bottom-left-radius: 40rpx;
				border-top-left-radius: 40rpx;

				image {
					width: 60rpx;
					height:0;
				}

				.kview {
					line-height: 1;
					margin-left: 10rpx;
					position: relative;
					top: -2rpx;
				}

				text {
					margin-top: 10rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #305cbb;
				}
			}
		}
	}
</style>